<template>
  <div id="app">
      <divider>泰和碧桂园车位统计</divider>

      <x-table :cell-bordered="false" style="background-color:#fff;" class="x-table-class">
        <thead>
          <tr>
            <th>序列</th>
            <th>楼栋</th>
            <th>单元</th>
            <th>房号</th>
            <th>是否购买</th>
            <th>数量</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <td>{{item.req}}</td>
            <td>{{item.loudong}}</td>
            <td>{{item.danyuan}}</td>
            <td>{{item.fanghao}}</td>
            <td style="color:red">{{item.isValid}}</td>
            <td>{{item.qty}}</td>
          </tr>
        </tbody>
      </x-table>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import { XTable,Divider } from 'vux'


export default {
  name: 'App',
  components: {
    XTable,
    Divider
  },
  data:function() {
    return {
      list:[
        {'req':0,'loudong':1,'danyuan':2,'fanghao':405,'isValid':'否','qty':0},
        {'req':1,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':2,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':3,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':4,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':5,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':6,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':7,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':8,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':9,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':10,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':11,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':12,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':13,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':14,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':15,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':16,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':17,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':18,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':19,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':20,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':21,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':22,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':23,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':24,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':25,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':26,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':27,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':28,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':29,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},
        {'req':30,'loudong':'','danyuan':'','fanghao':'','isValid':'','qty':''},

      ]
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.x-table-class th{
    font-weight: bold;
    font-size: small;
}
.x-table-class td{
    font-size: small;
}
</style>
